<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>

</html>
<script>

    //完整路由表的数据
    let routes = [
        {
            "path": "/user/info/:id",
            "name": "userInfo",
            "meta": {
                "title": "userInfo"
            },
            "children": [

            ]
        },
        {
            "path": "/article/editor/:id",
            "meta": {
                "title": "articleEditor"
            },
            "children": [

            ]
        },
        {
            "path": "/user/manage",
            "meta": {
                "title": "userManage",
                "icon": "personnel-manage"
            },
            "children": [

            ]
        },
        {
            "path": "/user/role",
            "meta": {
                "title": "roleList",
                "icon": "role"
            },
            "children": [

            ]
        },
        {
            "path": "/user/permission",
            "meta": {
                "title": "permissionList",
                "icon": "permission"
            },
            "children": [

            ]
        },
        {
            "path": "/user/import",
            "name": "import",
            "meta": {
                "title": "excelImport"
            },
            "children": [

            ]
        },
        {
            "path": "/article/ranking",
            "meta": {
                "title": "articleRanking",
                "icon": "article-ranking"
            },
            "children": [

            ]
        },
        {
            "path": "/article/create",
            "meta": {
                "title": "articleCreate",
                "icon": "article-create"
            },
            "children": [

            ]
        },
        {
            "path": "/article/:id",
            "meta": {
                "title": "articleDetail"
            },
            "children": [

            ]
        },
        {
            "path": "/login",
            "meta": {

            },
            "children": [

            ]
        },
        {
            "path": "/profile",
            "name": "profile",
            "meta": {
                "title": "profile",
                "icon": "el-icon-user"
            },
            "children": [

            ]
        },
        {
            "path": "/404",
            "name": "404",
            "meta": {

            },
            "children": [

            ]
        },
        {
            "path": "/401",
            "name": "401",
            "meta": {

            },
            "children": [

            ]
        },
        {
            "path": "/",
            "redirect": "/profile",
            "meta": {

            },
            "children": [
                {
                    "path": "/profile",
                    "name": "profile",
                    "meta": {
                        "title": "profile",
                        "icon": "el-icon-user"
                    }
                },
                {
                    "path": "/404",
                    "name": "404"
                },
                {
                    "path": "/401",
                    "name": "401"
                }
            ]
        },
        {
            "path": "/user",
            "redirect": "/user/manage",
            "meta": {
                "title": "user",
                "icon": "personnel"
            },
            "children": [
                {
                    "path": "/user/manage",
                    "meta": {
                        "title": "userManage",
                        "icon": "personnel-manage"
                    }
                },
                {
                    "path": "/user/role",
                    "meta": {
                        "title": "roleList",
                        "icon": "role"
                    }
                },
                {
                    "path": "/user/permission",
                    "meta": {
                        "title": "permissionList",
                        "icon": "permission"
                    }
                },
                {
                    "path": "/user/info/:id",
                    "name": "userInfo",
                    "meta": {
                        "title": "userInfo"
                    }
                },
                {
                    "path": "/user/import",
                    "name": "import",
                    "meta": {
                        "title": "excelImport"
                    }
                }
            ]
        },
        {
            "path": "/article",
            "redirect": "/article/ranking",
            "meta": {
                "title": "article",
                "icon": "article"
            },
            "children": [
                {
                    "path": "/article/ranking",
                    "meta": {
                        "title": "articleRanking",
                        "icon": "article-ranking"
                    }
                },
                {
                    "path": "/article/:id",
                    "meta": {
                        "title": "articleDetail"
                    }
                },
                {
                    "path": "/article/create",
                    "meta": {
                        "title": "articleCreate",
                        "icon": "article-create"
                    }
                },
                {
                    "path": "/article/editor/:id",
                    "meta": {
                        "title": "articleEditor"
                    }
                }
            ]
        }
    ]

    console.log(routes)

    //1. 去除没有children的数据
    /*返回所有的子路由*/

    let getChildrenRoutes = (routes) => {
        let result = [];
        routes.forEach((item, index) => {
            if (item.children && item.children.length > 0) {
                result.push(...item.children)
            }
        })
        return result;
    }



    //处理脱离层级的路由：某个一级路由为其他子路由，则剔除该一级路由，保留路由层级 //
    let filterRouters = (routes) => {
        const childrenRoutes = getChildrenRoutes(routes)
        console.log(childrenRoutes)
        return routes.filter((routes, index) => {
            return !childrenRoutes.find((item, i) => {
                return item.path === routes.path
            })
        })
    }


    // console.log(filterRouters(routes))
    //检测变量是否为空,为空的则返回true
    function isNull(data) {
        if (!data) return true;
        if (JSON.stringify(data) == "{}") return true;
        if (JSON.stringify(data) === '[]') return true;
        return false;
    }



    //将过滤之后的路由数据处理成想要的菜单数据
    let generateMenus = (routes,basePath = "") => {

      let result = [];
       
      routes.forEach((item,index)=>{

         if(isNull(item.meta) && isNull(item.children)){
             return;
         }

         if(isNull(item.meta) && !isNull(item.children)){
             result.push(...generateMenus(item.children))
             return;
         }

         let routePath = basePath + item.path;


         //查找result里面存不存在这三条数据的路径
         let route = result.find((m,i)=>{m.path == routePath});

         if(!route){
            route = {
                ...item,
                path : routePath,
                children : []
            }

            if(route.meta.title &&route.meta.icon){
                result.push(route)
            }
           
         }

         if(item.children){
             route.children.push(...generateMenus(item.children,route.path))
         }

      })

       routes.push

      return result;
    }

    console.log("menus=>", generateMenus(filterRouters(routes)))
























    // let generateMenus = (routes, basePath = "") => {
        // console.log(routes)

        // let result = []

        // routes.forEach((item, index) => {
        //     // 不存在 children && 不存在 meta 直接 return
        //     if (isNull(item.meta) && isNull(item.children)) return;

        //     // 存在 children 不存在 meta，进入迭代
        //     if (isNull(item.meta) && !isNull(item.children)) {
        //         result.push(...generateMenus(item.children))
        //         return;
        //     }
 
        //     const routePath = basePath + item.path;


        //     let route = result.find((m, i) => { return m.path == routePath })

   
        //     if (!route) {
        //         route = {
        //             ...item,
        //             path: routePath,
        //             children: []
        //         }

        //         if (route.meta.title && route.meta.icon) {
        //             result.push(route)
        //         }
        //     }





        //     if (item.children) {
        //         console.log(item.children,item.path)
        //         route.children.push(...generateMenus(item.children, route.path))
        //     }
        // })

        // return result;
    // }


  










    //通过完成路由表转化之后的数据
    let menus = [
        {
            "path": "/profile",
            "name": "profile",
            "meta": {
                "title": "profile",
                "icon": "el-icon-user"
            },
        },
        {
            "path": "/user",
            "redirect": "/user/manage",
            "meta": {
                "title": "user",
                "icon": "personnel"
            },
            "props": {
                "default": false
            },
            "children": [
                {
                    "path": "/user/manage",
                    "name": "userManage",
                    "meta": {
                        "title": "userManage",
                        "icon": "personnel-manage"
                    },
                    "children": [

                    ]
                },
                {
                    "path": "/user/role",
                    "name": "userRole",
                    "meta": {
                        "title": "roleList",
                        "icon": "role"
                    },
                    "children": [

                    ]
                },
                {
                    "path": "/user/permission",
                    "name": "userPermission",
                    "meta": {
                        "title": "permissionList",
                        "icon": "permission"
                    },
                    "children": [

                    ]
                }
            ],
        },
        {
            "path": "/article",
            "redirect": "/article/ranking",
            "meta": {
                "title": "article",
                "icon": "article"
            },
            "props": {
                "default": false
            },
            "children": [
                {
                    "path": "/article/ranking",
                    "name": "articleRanking",
                    "meta": {
                        "title": "articleRanking",
                        "icon": "article-ranking"
                    },
                    "children": [

                    ]
                },
                {
                    "path": "/article/create",
                    "name": "articleCreate",
                    "meta": {
                        "title": "articleCreate",
                        "icon": "article-create"
                    },
                    "children": [

                    ]
                }
            ],
        }
    ]
    console.log(menus)
</script>